<template>
    <div>
        <el-card class="box-card">
        <el-form :model="form" label-width="120px">
            <el-form-item label="你想说：">
            <el-input
                type="textarea"
                v-model="form.qq"
                rows="5"
                placeholder="请输入图片的描述"
            ></el-input>
            </el-form-item>
            <el-form-item label="生成图片数量:">
            <el-select v-model="form.qty" placeholder="选择数量">
                <el-option label="1" value="1"></el-option>
                <el-option label="2" value="2"></el-option>
                <el-option label="3" value="3"></el-option>
                <el-option label="4" value="4"></el-option>
                <el-option label="5" value="5"></el-option>
            </el-select>
            </el-form-item>
            <el-form-item>
            <el-button type="primary" @click="send">生成</el-button>
            </el-form-item>
        </el-form>
        </el-card>

        <el-card class="box-card">
        <h4>回复：</h4>
        <el-row :gutter="20">
            <el-col v-for="(url, i) in form.answer" :key="i" :span="6">
            <el-card :body-style="{ padding: '0px' }">
                <img :src="url" alt="Generated Image" style="width: 100%; height: auto; display: block; max-height: 300px;">
            </el-card>
            </el-col>
        </el-row>
        </el-card>
    </div>
</template>

<script>
import axios from "../plugins/axios.js";

export default {
    data() {
        return {
            form:{
                qty: 1,
                qq: "",
                answer: [] 
            }

        }
    },
    methods: {
        // 异步方法
        send: async function () {
            var curUser = JSON.parse(sessionStorage.getItem("user"));
            var response = await axios.post("http://localhost:9000/llm/wanxiang",
                "say=" + this.form.qq + "&qty=" + this.form.qty)
            if(response.data.code==2000){
                this.form.answer = response.data;
            }else{
                alert(response.data.msg);
            }

        }
        // 同步方法
        // send: function () {
        //     axios.post("http://localhost:9000/llm/wanxiang",
        //         "say=" + this.qq + "&qty=" + this.qty,)
        //         // 箭头函数不会创建自己的this环境，否则会this会变回为axios
        //         .then((response) => { this.answer = response.data; })
        //         .catch((err) => {
        //             console.log(err);
        //             alert("生成失败");
        //         });
        // }
    }
}
</script>

<style scoped>
.box-card {
    background-color: rgb(255, 255, 255, 0.2);
    padding: 20px;
    border-radius: 10px;
    border: 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 800px;
    margin: 80px auto; /* 居中显示 */
    transition: transform 0.3s ease-in-out;
}
</style>
